<template>
  <div class="app">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>详情</span>
        <el-button
          circle
          size="mini"
          icon="el-icon-arrow-left"
          style="float:right"
          @click="back()"
        />
      </div>
      <el-collapse style="margin-top: -20px;">
        <el-collapse-item>
          <template slot="title">
            零件列表
            <i class="header-icon el-icon-info"></i>
          </template>
          <el-table
            v-loading="listLoading"
            :data="tableData"
            stripe
            height="500"
            style="width: 100%;font-size:12px;"
            v-el-table-infinite-scroll="load"
          >
            <el-table-column align="center" prop="id" label="生产任务单号" />
            <el-table-column align="center" prop="id2" label="零件编号">
              <template slot-scope="scope">
                <el-button @click="dialogVisible=true" type="text" size="small">{{scope.row.id2}}</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="length" label="长度" />
            <el-table-column align="center" prop="num" label="总数量" />
          </el-table>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            集成料使用情况
            <i class="header-icon el-icon-info"></i>
          </template>
          <el-table
            v-loading="listLoading"
            :data="tableData2"
            stripe
            height="500"
            style="width: 100%;font-size:12px;"
          >
            <el-table-column align="center" prop="id" label="集成料编号">
              <template slot-scope="scope">
                <el-button @click="dialogVisible=true" type="text" size="small">{{scope.row.id2}}</el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="stageName" label="长度" />
            <el-table-column align="center" prop="name" label="总数量" />
            <el-table-column align="center" prop="id" label="总工时（分钟）" />
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="500px">
      <el-table
        v-loading="listLoading"
        :data="tableData3"
        stripe
        height="300"
        style="width: 100%;font-size:12px;"
      >
        <el-table-column align="center" prop="id" label="零件代码" />
        <el-table-column align="center" label="部件加工图片">
          <template slot-scope="scope">
            <el-button @click="handelPic(scope.row)" type="text" size="small">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="file" label="部件加工NC文件" />
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button size="mini" round @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elTableInfiniteScroll from 'el-table-infinite-scroll';
// import {

// } from "@/api/index";

export default {
  name: "details",
  data() {
    return {
      count: 10,
      loading: false,
      tableData: [
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        },
        {
          id: "123456",
          id2: "111111",
          length: "5",
          num: "100"
        }
      ],
      tableData2: [],
      tableData3: [
        ,
        {
          id: "123456",
          file: "未上传"
        }
      ],
      listLoading: true,
      dialogVisible: false,
      fromData: {
        id: "",
        name: "",
        deviceName: "",
        deviceCode: "",
        h: "",
        peopleNum: "",
        jobStandards: "",
        stageId: "",
        stageName: "1"
      },
      formLabelWidth: "140px",
      deviceNameList: {},
      deviceCodeList: {},
      processList: {},
      stageList: {}
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    load() {
      this.$message.success('加载下一页');
    //   this.tableData = this.tableData.concat(exampleData);
    },
    back() {
      this.$router.back();
    },
    save() {
      edit(this.fromData).then(response => {
        if (response.success) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(response.message);
        }
      });
    },
    changDeviceName() {
      getDeviceCode({ id: this.fromData.deviceName }).then(response => {
        this.deviceCodeList = response.data.list;
      });
    },
    changProcessList(stageId) {
      getProcessList({ id: stageId }).then(response => {
        console.log("【工序列表：】", this.processList);
        this.processList = response.data.list;
      });
    },
    chang(val) {
      this.fromData.name = val.name;
      this.fromData.id = val.id;
      this.dialogVisible = true;
      this.changProcessList(val.id);
    },
    statusbColor(val) {
      if (val === "等待") {
        return "color:#ccc";
      }
      if (val === "故障") {
        return "color:red";
      }
      if (val === "正在运行") {
        return "color:#4CA666";
      }
    },
    initData() {
      this.listLoading = false;
      //   getList().then(response => {
      //     this.tableData = response.data.list;
      //     this.listLoading = false;
      //   });
    }
  }
};
</script>

<style lang="scss" scoped>
.app {
  font-size: 12px;
  padding: 45px 45px 0 45px;
}
/deep/ .el-card__header {
  padding: 10px 20px;
  span {
    margin: 5px 0;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    padding-left: 10px;
    border-left: #2b99fa solid 2px;
  }
  a {
    line-height: 22px;
  }
}
/deep/ .el-card__body {
  padding: 20px 10px;
}
/deep/ .el-dialog {
  border-radius: 5px;
}
/deep/ .el-dialog__footer {
  background: #f7f7f7;
  border-radius: 0 0 5px 5px;
}
.echarts-div {
  width: 100%;
  height: 170px;
  margin: 0 auto;
}
</style>
